<template>
  <div id="map"></div>
</template>
<script>
import Feature from "ol/Feature.js";
import Map from "ol/Map.js";
import View from "ol/View.js";
import GeoJSON from "ol/format/GeoJSON.js";
import Projection from "ol/proj/Projection";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import { OSM, Vector as VectorSource } from "ol/source.js";
export default {
  data () {
    return {
      projection: new Projection({
        code: "EPSG:4326",
        units: "degrees",
        axisOrientation: "neu",
        global: true
      }),
      format: "image/png",
      bounds: [-180, -90, 180, 90],
      center: [113.0, 29.84229],
      zoom: 20,
      geojson: null
    };
  },
  created () {

  },
  mounted () {
    var geojsonObject = {
      type: "FeatureCollection",
      crs: {
        type: "name",
        properties: {
          name: "EPSG:3857"
        }
      },
      features: [
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [0, 0]
          }
        },
        {
          type: "Feature",
          geometry: {
            type: "LineString",
            coordinates: [[4e6, -2e6], [8e6, 2e6]]
          }
        },
        {
          type: "Feature",
          geometry: {
            type: "LineString",
            coordinates: [[4e6, 2e6], [8e6, -2e6]]
          }
        },
        {
          type: "Feature",
          geometry: {
            type: "Polygon",
            coordinates: [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
          }
        },
        {
          type: "Feature",
          geometry: {
            type: "MultiLineString",
            coordinates: [
              [[-1e6, -7.5e5], [-1e6, 7.5e5]],
              [[1e6, -7.5e5], [1e6, 7.5e5]],
              [[-7.5e5, -1e6], [7.5e5, -1e6]],
              [[-7.5e5, 1e6], [7.5e5, 1e6]]
            ]
          }
        },
        {
          type: "Feature",
          geometry: {
            type: "MultiPolygon",
            coordinates: [
              [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
              [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],
              [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
            ]
          }
        },
        {
          type: "Feature",
          geometry: {
            type: "GeometryCollection",
            geometries: [
              {
                type: "LineString",
                coordinates: [[-5e6, -5e6], [0, -5e6]]
              },
              {
                type: "Point",
                coordinates: [4e6, -5e6]
              },
              {
                type: "Polygon",
                coordinates: [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
              }
            ]
          }
        }
      ]
    };
    // var geojsonObject = this.geojson;
    // console.log("1",this.geojson);
    // console.log("2",geojsonObject);
    this.get_counties().then(data => {
      console.log(data);
      var vectorSource = new VectorSource({
        features: new GeoJSON().readFeatures(data)
      });
      var vectorLayer = new VectorLayer({
        source: vectorSource
      });
      var map = new Map({
        target: "map",
        layers: [
          // new TileLayer({
          //   source: new OSM()
          // }),
          vectorLayer
        ],
        view: new View({
          center: [114, 30.550064],
          zoom: 5
        })
      })
    }).catch(err => {
      console.log(err);
    });
  },
  methods: {
    get_counties () {
      return this.$axios.get("http://localhost:5000/load_json").then(res => {
        // console.log("get",res.data)
        // this.geojson = res.data;
        return res.data;
      });
    }
  }
};
</script>
<style scoped>
#map {
  height: 100%;
  width: 100%;
}
</style>

